<template>
  <div class="container">
    <el-card shadow="never" class="card">
      <el-form
        ref="formRef"
        class="addForm"
        :rules="rules"
        :model="formData"
        label-width="120px"
      >
        <h5 class="title">版权信息</h5>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="创建时间：" v-if="copyright_id">
              {{ formData.create_time }}
            </el-form-item>
            <el-form-item label="被授权主体：" prop="subject">
              <el-input
                placeholder="请输入被授权的公司名称或个人姓名"
                v-model="formData.subject"
              />
            </el-form-item>
            <el-form-item label="开始时间：" prop="begin_time">
              <el-date-picker
                v-model="formData.begin_time"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期时间"
              />
            </el-form-item>
            <el-form-item label="价格：" prop="price">
              <el-input placeholder="请输入价格" v-model="formData.price" />
            </el-form-item>
            <el-form-item label="授权文件号：" prop="doc_no">
              <el-input placeholder="请输入文件号" v-model="formData.doc_no" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建人：" v-if="copyright_id">
              {{ formData.apply_user }}
            </el-form-item>
            <el-form-item label="类型：" prop="type">
              <el-select v-model="formData.type">
                <el-option
                  v-for="(item, index) in materialTypeEnums"
                  :value="+index"
                  :label="item"
                  :key="index"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="供应商：" prop="supplier_name">
              <el-input
                placeholder="请输入供应商名称"
                v-model="formData.supplier_name"
              />
            </el-form-item>
            <el-form-item label="到期时间：" prop="end_time">
              <el-date-picker
                v-model="formData.end_time"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              />
            </el-form-item>
            <p class="tips">不写代表永久有效</p>
          </el-col>
        </el-row>
        <el-form-item label="授权文件：">
          <BaseUpload
            list-type="picture-card"
            :limit="5"
            v-model="formData.files"
          >
            <!-- <BaseImg
              v-if="formData.files && formData.files.length > 0"
              :preview="false"
              class="upload-img"
              :src="formData.files[0].url"
            /> -->
            <i class="el-icon-plus" />
            <p slot="description">最多可传5张图</p>
          </BaseUpload>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="使用范围：" prop="use_range">
              <el-input
                type="textarea"
                placeholder="请输入使用范围"
                v-model="formData.use_range"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态：" v-if="copyright_id">
              {{ formData.status }}
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 素材信息 -->
        <h5 class="title">素材信息</h5>
        <el-form-item label="录入方式：" prop="material_type">
          <el-radio-group
            v-model="formData.material_type"
            @change="changeMaterialType"
          >
            <el-radio
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.value"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" :key="formData.material_type">
        <el-table-column label="素材编号" prop="material_no">
          <template slot-scope="scope">
            <el-input
              placeholder="请输入素材编号"
              v-model="scope.row.material_no"
            />
          </template>
        </el-table-column>
        <el-table-column prop="material_name">
          <template slot="header">
            <span>
              <i class="required">*</i>
              素材名称
            </span>
          </template>
          <template slot-scope="scope">
            <el-input
              placeholder="请输入素材名称"
              v-model="scope.row.material_name"
            />
          </template>
        </el-table-column>
        <el-table-column prop="material_link">
          <template slot="header">
            <span>
              <i class="required">*</i>
              {{ formData.material_type == 1 ? '素材网址' : '素材文件' }}
            </span>
          </template>
          <template slot-scope="scope">
            <el-input
              placeholder="请输入素材网址"
              v-model="scope.row.material_link"
              v-if="formData.material_type == 1"
            />
            <BaseUpload
              v-model="scope.row.material_link"
              :show-file-list="false"
              type="avatar"
              @success="handle"
              v-else
            >
              <p slot="description" />
              <template v-if="!scope.row.material_link.length">
                <div class="upload-card el-upload--picture-card">
                  <i class="el-icon-plus" />
                </div>
              </template>
              <BaseImg
                v-else
                :src="scope.row.material_link[0].url"
                class="upload-img"
              />
            </BaseUpload>
          </template>
        </el-table-column>

        <el-table-column label="素材封面">
          <template slot-scope="scope">
            <BaseUpload
              v-model="scope.row.material_cover"
              :show-file-list="false"
              type="avatar"
              @success="handle"
            >
              <p slot="description" />
              <template v-if="!scope.row.material_cover.length">
                <div class="upload-card el-upload--picture-card">
                  <i class="el-icon-plus" />
                </div>
              </template>
              <BaseImg
                v-else
                :src="scope.row.material_cover[0].url"
                class="upload-img"
              />
            </BaseUpload>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot="header">
            <span>
              <i class="required">*</i>
              使用网址
            </span>
          </template>
          <template slot-scope="scope">
            <el-input
              placeholder="请输入使用网址"
              v-model="scope.row.material_url"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="handleDeleteTable(scope)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="add-table-btn" @click="handleAddData">
        <i class="el-icon-plus" />
        添加
      </div>
      <div class="add-btn">
        <el-button class="add" type="primary" @click="handleSubmit">
          添加
        </el-button>
        <el-button class="exit" @click="goBack">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import copyrightApi from '@/api/copyright'
import BaseUpload from '@/components/baseUpload'
import { nanoid } from 'nanoid'
import { materialTypeEnums } from '@/enums/copyright'
import BaseImg from '@/components/baseImg'
export default {
  components: {
    BaseUpload,
    BaseImg
  },

  data() {
    return {
      copyright_id: '',
      materialTypeEnums: Object.freeze(materialTypeEnums),
      tableData: [],
      typeOptions: [
        {
          label: '录入网址',
          value: 1
        },
        {
          label: '上传文件',
          value: 2
        }
      ],
      rules: {
        subject: {
          required: true,
          message: '请输入被授权的公司名称或个人姓名',
          trigger: 'blur'
        },
        type: {
          required: true,
          message: '请选择类型',
          trigger: 'blur'
        },
        supplier_name: {
          required: true,
          message: '请输入供应商名称',
          trigger: 'blur'
        },
        begin_time: {
          required: true,
          message: '请选择开始时间',
          trigger: 'change'
        },
        price: {
          required: true,
          message: '请输入价格',
          trigger: 'blur'
        },
        doc_no: {
          required: true,
          message: '请输入授权文件号',
          trigger: 'blur'
        },
        use_range: {
          required: true,
          message: '请输入使用范围',
          trigger: 'blur'
        },
        material_type: {
          required: true,
          message: '请选择录入方式',
          trigger: 'change'
        }
      },
      formData: {
        type: '',
        material_type: '',
        subject: '',
        supplier_name: '',
        begin_time: '',
        end_time: '',
        price: '',
        doc_no: '',
        use_range: '',
        material_detail: '',
        files: null,
        id: ''
      }
    }
  },

  mounted() {
    this.copyright_id = this.$route.query.id
    if (this.$route.query.id) {
      this.getInfo(this.copyright_id)
    }
  },
  methods: {
    // 更改录入方式
    changeMaterialType(data) {
      this.tableData = []
    },
    // 版权详情
    async getInfo(copyright_id) {
      const res = await copyrightApi.copyrightInfo({ copyright_id })
      if (res.code == 0) {
        const files = []
        res.data.info.files.map((el, index) => {
          files.push({
            url: el,
            name: index
          })
        })
        this.formData = {
          ...res.data.info,
          files: files
        }
        this.tableData = res.data.detail
        this.tableData.forEach(item => {
          if (item.material_cover) {
            item.material_cover = [{ url: item.material_cover }]
          } else {
            item.material_cover = []
          }
          if (this.formData.marterial_type == 2) {
            item.material_link = [{ url: item.material_link }]
          }
        })
      }
    },
    // 提交保存
    async handleSubmit() {
      const res = await this.$refs.formRef
        .validate()
        .catch(err => console.log(err))
      if (res) {
        let result = null
        const arr = this.tableData.map(el => ({
          ...el,
          material_cover: el.material_cover[0].url
        }))
        this.formData.material_detail = arr
        if (this.formData.id) {
          result = await copyrightApi.editCopyright(this.formData)
        } else {
          result = await copyrightApi.addCopyright(this.formData)
        }
        if (result.code == 0) {
          this.$message.success(result.msg)
          this.$emit('update:dialogShow', false)
          this.$emit('success')
        } else {
          this.$message.error(result.msg)
        }
      }
    },
    handle() {
      console.log(this.tableData)
    },
    handleAddData() {
      this.tableData.push({
        material_no: '',
        material_name: '',
        material_link: [],
        material_cover: [],
        material_url: ''
      })
    },
    // 删除table
    handleDeleteTable(row) {
      console.log(row, '---->')
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.upload-img {
  width: 60px;
}
.tips {
  text-indent: 120px;
  font-size: 13px;
}
.addForm {
  ::v-deep .el-date-editor.el-input,
  .el-select {
    width: 100%;
  }
  .el-form-item {
    margin-bottom: 22px;
  }
}
i.required {
  color: #f84311;
}
.add-btn {
  text-align: center;
  padding: 50px 0 30px 0;
}
.container h5.title {
  height: 40px;
  line-height: 40px;
  border-left: 4px solid #f84311;
  background-color: #f5f5f5;
  font-size: 15px;
  color: #555;
  padding-left: 20px;
  margin-bottom: 20px;
}
.add-table-btn {
  width: 100%;
  border: 1px dashed #dcdfe6;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
  margin-top: 20px;
  cursor: pointer;
}
.upload-card {
  width: 80px;
  height: 80px;
  line-height: 80px;
}
</style>
